<template>  
	<view style="height: 100%;">  
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :vertical="false"  
			:circular="true" style="background-color: aquamarine;height: 150px;" :current="2" @change="swiperChange">  
			<swiper-item v-for="item,index in list">  
				<view class="swiper-item" style="width: 100%;height: 100%;">  
					<image :src="item" mode="" style="width: 100%;height: 100%;"></image>  
				</view>  
			</swiper-item>  
		</swiper>  
		<uni-grid :column="5" @change="gridChange">  
			<uni-grid-item :index="index" v-for="(item,index) in typelist">  
				<view class="grid-item">  
					<image :src="'/static'+item.icon" mode="" style="width:30px;height:30px;"></image>  
					<text>{{item.typename}}</text>  
				</view>  
			</uni-grid-item>  
		</uni-grid>  
		<view style="margin-top: 10px;">  
			<button @click="goTogage">发表评论</button> 
			 <button @click="goTogages">查看评论</button>
		</view>  
	</view>  
</template>

<script>
	export default {
		data() {
			return {
				"typelist": [{
						"id": 1,
						"typename": "新闻",
						"icon": "/images/announcement.png"
					},
					{
						"id": 2,
						"typename": "公告",
						"icon": "/images/classmate.png"
					},
					{
						"id": 3,
						"typename": "同学",
						"icon": "/images/my.png"
					},
					{
						"id": 4,
						"typename": "电话",
						"icon": "/images/telephone.png"
					},
					{
						"id": 5,
						"typename": "留言",
						"icon": "/images/leaveword.png",
						
					},
					
				],
				list: ['/static/images/down.jpeg']
			}
		},
		onLoad() {

		},
		methods: {
			goTogage(){
				uni.navigateTo({
					url:'/pages/comments/comments'
				})
			},
			goTogages(){
				uni.navigateTo({
						url:'/pages/comments/add'
					})
				},
			swiperChange(e) {
				console.log("===", e);
			},
			gridChange(e) {
				console.log("---", e);
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.grid-item{
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
	}
</style>